<template>
	<view class="dropdown-menu">
		<view class="dm-tab">
			<view 
				class="dm-item" 
				hover-class="btn-hover"
				:class="{'dm-active': item.value == currentTab }" 
				v-for="item in tabs" 
				:key="item.value" 
				@click="handleTabChange(item.value)"
			>
				<view class="dm-text u-line-1">{{ item.label }}</view>
				<view class="dm-arrow">
					<u-icon 
						name="play-left-fill" 
						:color="item.value == currentTab ? '#0E94FC' : '#999999'" 
						size="20rpx"
					></u-icon>
				</view>
			</view>
		</view>
		
		<view class="dm-popup" :class="{'show-popup': showPopup}">
			<view class="dm-popup-content">
				<template v-if="currentTab == 'date'">
					<view
						class="dm-popup-item" 
						hover-class="btn-hover" 
						:class="{'dm-popup-active': item.dictValue == currentOrderBy}"
						v-for="item in dateList" 
						:key="item.dictValue" 
						@click="handleOrderByChange(item)"
					>{{ item.dictLabel }}</view>
				</template>
				<template v-else-if="currentTab == 'stock'">
					<view
						class="dm-popup-item" 
						hover-class="btn-hover" 
						:class="{'dm-popup-active': item.dictValue == currentOrderBy}"
						v-for="item in stockList" 
						:key="item.dictValue" 
						@click="handleOrderByChange(item)"
					>{{ item.dictLabel }}</view>
				</template>
				<template v-else-if="currentTab == 'sales'">
					<view
						class="dm-popup-item" 
						hover-class="btn-hover" 
						:class="{'dm-popup-active': item.dictValue == currentOrderBy}"
						v-for="item in salesList" 
						:key="item.dictValue" 
						@click="handleOrderByChange(item)"
					>{{ item.dictLabel }}</view>
				</template>
				<template v-else-if="currentTab == 'channel'">
					<view
						class="dm-popup-item" 
						hover-class="btn-hover" 
						:class="{'dm-popup-active': item.dictValue == currentChannel}"
						v-for="item in channelList" 
						:key="item.dictValue" 
						@click="handleChannelChange(item)"
					>{{ item.dictLabel }}</view>
				</template>
			</view>
			<!-- 遮罩层 -->
			<view class="dm-popup-mask" @click="handlePopupClose"></view>
		</view>
	</view>
</template>

<script>
	const tabs = [
		{ label: '上新日期', value: 'date' },
		{ label: '库存排行', value: 'stock' },
		{ label: '销售排行', value: 'sales' },
		{ label: '售卖渠道', value: 'channel' },
	]
	const dateList = [
		{ dictLabel: '最新', dictValue: 1 },
		{ dictLabel: '最早', dictValue: 2 },
	]
	const salesList = [
		{ dictLabel: '升序', dictValue: 3 },
		{ dictLabel: '降序', dictValue: 4 },
	]
	const stockList = [
		{ dictLabel: '升序', dictValue: 3 },
		{ dictLabel: '降序', dictValue: 4 },
	]
	const channelList = [
		{ dictLabel: '全部销售', dictValue: '' },
		{ dictLabel: '门店销售', dictValue: 1 },
		{ dictLabel: '直播销售', dictValue: 2 },
		{ dictLabel: '微信销售', dictValue: 3 },
		{ dictLabel: '国内独立站', dictValue: 4 },
	]

	export default {
		props: {
			orderBy: [Number, String], // 日期、库存、销售排序
			channel: {
				type: [Number, String],
				default: ''
			}, // 售卖渠道
			showFileds: {
				type: Array,
				default: () => ['date']
			}
		},
		data() {
			return {
				tabs,
				currentTab: '',
				
				showPopup: false,
				
				dateList,
				stockList,
				salesList,
				channelList,
				
				currentOrderBy: this.orderBy,
				currentChannel: this.channel,
			}
		},
		created() {
			this.tabs = tabs.filter(item => this.showFileds.includes(item.value))
		},
		methods: {
			// tab 切换
			handleTabChange(value) {
				if (this.currentTab === value) {
					this.handlePopupClose()
				} else {
					this.currentTab = value
					this.showPopup = true
				}
			},
			// 弹出层开关
			handlePopupClose() {
				this.showPopup = false
				this.currentTab = ''
			},
			// 排序切换
			handleOrderByChange(item) {
				this.currentOrderBy = item.dictValue
				this.handlePopupClose()
				this.$emit('orderbychange', item)
			},
			// 售卖渠道切换
			handleChannelChange(item) {
				this.currentChannel = item.dictValue
				this.handlePopupClose()
				this.$emit('channelchange', item)
			},
		}
	}
</script>

<style lang="scss" scoped>
	$menuHeight: 88rpx;
	.dropdown-menu {
		height: $menuHeight;
		padding: 0 30rpx;
		position: relative;
		.dm-tab {
			height: 100%;
			display: flex;
			align-items: center;
			// justify-content: space-between;
			justify-content: space-around;
			.dm-item {
				display: flex;
				align-items: center;
				.dm-text {
					max-width: 160rpx;
					font-size: 28rpx;
					font-weight: normal;
					line-height: 36rpx;
					color: $u-main-color;
					margin-right: 6rpx
				}
				.dm-arrow {
					transform: rotate(-90deg);
					transition: transform 0.2s;
				}
			}
			.dm-item.dm-active {
				.dm-text {
					color: $u-primary;
				}
				.dm-arrow {
					transform: rotate(90deg);
				}
			}
		}
		.dm-popup {
			position: absolute;
			top: $menuHeight;
			left: 0;
			right: 0;
			z-index: -1;
			opacity: 0;
			transition: all 0.3s; 
			&-content {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				z-index: 2;
				background-color: $u-nav-color;
				border-top: 1px solid $u-border-color;
				.dm-popup-item {
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					font-size: 28rpx;
					color: $u-main-color;
					border-bottom: 1px solid $u-border-color;
				}
				.dm-popup-active {
					color: $u-primary;
				}
			}
			&-mask {
				position: fixed;
				// #ifdef H5
				top: calc(#{$menuHeight} * 3);
				// #endif
				// #ifndef H5
				top: calc(#{$menuHeight} * 2);
				// #endif
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 1;
				display: none;
				background-color: rgba(0, 0, 0, 0.3);
			}
		}
		.dm-popup.show-popup {
			z-index: 66;
			opacity: 1;
			.dm-popup-mask {
				display: block;
			}
		}
	}
</style>